﻿
<div class="row">
    <div class="col-md-2 col-sm-6 col-xs-12">
        <form>
            <div class="form-group">
                <label>Graph Type</label>
                <select class="form-control" data-ng-model="graphType" data-ng-change="setCurrentGraph()">
                    <option value="df">Select type...</option>
                    <option value="linear">linear</option>
                    <option value="quadratic">quadratic</option>
                    <option value="quadraticv">quadratic vertex</option>
                    <option value="poly3">polynomial (3)</option>
                    <option value="sinewave">sine wave</option>
                    <option value="cosinewave">cosine wave</option>
                    <option value="exponential">exponential</option>
                    <option value="normal">normal distribution</option>
                </select>
            </div>
            <div class="form-group">
                <label>x Min</label>
                <input class="form-control" type="number" data-ng-model="canvSize.xMin" data-ng-change="renderGraph()" />
            </div>
            <div class="form-group">
                <label>x Max</label>
                <input class="form-control" type="number" data-ng-model="canvSize.xMax" data-ng-change="renderGraph()" />
            </div>
            <div class="form-group">
                <label>y Min</label>
                <input class="form-control" type="number" data-ng-model="canvSize.yMin" data-ng-change="renderGraph()" />
            </div>
            <div class="form-group">
                <label>y Max</label>
                <input class="form-control" type="number" data-ng-model="canvSize.yMax" data-ng-change="renderGraph()" />
            </div>
            <div class="form-group">
                <input class="form-control btn btn-danger" type="button" value="Reset" data-ng-click="reset()" />
            </div>
            <div class="form-group">
                <input data-ng-show="token && graphs.length > 0" class="form-control btn btn-success" type="button" value="Save" data-ng-click="saveSet()" />
            </div>
            <div class="form-group">
                <input class="form-control btn btn-success" type="button" value="{{layoutType}}" data-ng-click="flipGrid()" />
            </div>
        </form>
    </div>
    <div class="col-md-2 col-sm-6 col-xs-12">
        <form>
            <div class="form-group" data-ng-repeat="graph in graphs">
                <div class="btn btn-sm btn-default form-control" data-ng-click="makeActive(graph)">
                    <span ng-style="{ color: graph.lineColor}">{{graph.name}}</span>
                </div>
            </div>
        </form>
    </div>
    <div class="clearfix visible-sm visible-xs"></div>
    <div class="col-md-8 col-sm-12 col-xs-12">
        <div class="col-sm-12">
            <canvas width="600" height="600" id="canvas">Oops... this browser doesn't support the canvas.</canvas>
        </div>

        <div class="col-xs-12">
            <h4 data-ng-style="{ color: graphTemplate.lineColor}">{{graphTemplate.name}} <small>{{graphTemplate.form}}</small></h4>
        </div>
        <div data-ng-show="graphParams" class="col-xs-12">
            <div class="row">
                <form>
                    <div class="form-group col-md-2 col-xs-12" data-ng-repeat="(key, value) in graphParams">
                        <label>{{key}}</label>
                        <input class="form-control" type="number" data-ng-model="graphParams[key]" data-ng-change="adjustParams()" />
                    </div>
                </form>
            </div>
            <br />
            <div class="row">
                <form class="form-inline">
                    <div data-ng-show="graphs.length > 0 && currentGraph" class="form-group">
                        <input class="form-control btn btn-warning" type="button" value="- Remove Curve" data-ng-click="removeGraph()" />
                    </div>
                    <div data-ng-hide="graphType=='df'" class="form-group">
                        <input class="form-control btn btn-success" type="button" value="+ Add Curve" data-ng-click="addGraph()" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

